<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			服务管理
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-rainbow-fill" style="color:#999;font-size:12px;"></i>
				常规服务
			</view>
			<view class="bc">
				<button class="r30" type="button" @click="addNode(0,1)">
					<i class="ri-add-circle-fill" style="color:#fff;font-size:12px;"></i>
					添加服务
				</button>
			</view>
		</view>
		<view class="p-node" v-if="addByParentId2">
			<!-- 第一层 -->
			<view v-if="nodeList.length == 0">
				<h1>抱歉暂无数据，请添加</h1>
			</view>
			<view class="p-table" v-else>
				<table class="pure-table pure-table-horizontal">
					<tr>
						<th>编号</th>
						<th>封面</th>
						<th>服务名称</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					<tr v-for="laji in nodeList">
						<td>{{laji.id}}</td>
						<td>
							<image style="width: 100px; height: 100px;" :src="'data:image/jpeg;base64,'+laji.imgPath"
								mode="aspectFill">
							</image>
						</td>
						<td>
							{{laji.name}}
						</td>
						<td>
							<view class="bz" v-if="laji.state == 'true'">
								<i class="ri-checkbox-circle-fill" style="color:#7800BE;font-size:12px;"></i>
								<!-- <i-icon class="r10" size="20upx" color="#7800BE" name="checkbox-circle-fill"></i-icon > -->
								开启
							</view>
							<view class="bz" v-else>
								<i class="ri-checkbox-circle-fill" style="color:#f73164;font-size:12px;"></i>
								<!-- <i-icon class="r10" size="20upx" color="#f73164" name="checkbox-circle-fill"></i-icon> -->
								禁止
							</view>
						</td>
						<td>
							<view class="bz">
								<button class="r10" @click="alter(laji)">
									<i class="ri-pencil-fill" style="color:#fff;font-size:12px;"></i>
									<!-- <i-icon size="20upx" color="#FFF" name="pencil-fill"></i-icon> -->
									编辑
								</button>
								<button class="b-dell" @click="delNode(laji.id,laji.name)">
									<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
									<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
									删除
								</button>
							</view>
						</td>
					</tr>
				</table>
			</view>
		</view>
		<view v-if="addByParentId == 1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-settings-line" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="settings-line" class="r10"></i-icon> -->
						编辑服务
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:12px;"
						@click="addByParentId=false,addByParentId2=true"></i>
					<!-- <i-icon size="26upx" color="#f73164" name="close-circle-fill"
						@click="addByParentId=false,addByParentId2=true"></i-icon> -->
				</view>
				<!-- <view class="wz">上传封面</view> -->
				<view class="cu-bar bg-white margin-top">
					<view class="wz">上传封面</view>
					<view class="action">
						{{imgList2.length}}/1
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2"
							:data-url="imgList2[index]">
							<image :src="imgList2[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solid" @tap="ChooseImage2" v-if="imgList2.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<!-- 上传封面 -->
				<view class="com">
					<view class="li bc">
						<view class="wz">服务名称</view>
						<view class="nr"><input type="text" v-model="alterName" placeholder="服务名称" /></view>
					</view>
					<view class="li bc">
						<view class="wz">副标题</view>
						<view class="nr"><input type="text" v-model="altersubhead" placeholder="副标题(选填)" /></view>
					</view>
					<view class="li bc">
						<view class="wz">服务简介</view>
						<view class="nr"><input type="text" v-model="altercontent" placeholder="简介(选填)" /></view>
					</view>
					<view class="li bc">
						<view class="wz">状态</view>
						<view class="nr">
							<radio-group @change="radioChange2">
								<view v-if="alterState == 'true'">
									<label class="radio">
										<radio value="rr1" checked="true" @click="open" color="#18BC37" />开启
									</label>
									<label class="radio">
										<radio value="rr2" color="#ED1C24" />禁用
									</label>
								</view>
								<view v-else>
									<label class="radio">
										<radio value="rr1" color="#18BC37" />开启
									</label>
									<label class="radio">
										<radio value="rr2" checked="true" color="#ED1C24" />禁用
									</label>
								</view>
							</radio-group>
						</view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="alterTrue()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#7800BE;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="addByParentId == 2" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-settings-line" style="color:#7800BE;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="settings-line" class="r10"></i-icon> -->
						添加服务
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:14px;"
						@click="addByParentId=false,addByParentId2=true"></i>
					<!-- <i-icon size="26upx" color="#f73164" name="close-circle-fill"
						@click="addByParentId=false,addByParentId2=true"></i-icon> -->
				</view>
				<!-- <view class="wz">上传封面</view> -->
				<view class="cu-bar bg-white margin-top">
					<view class="wz">上传封面</view>
					<view class="action">
						{{imgList2.length}}/1
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2"
							:data-url="imgList2[index]">
							<image :src="imgList2[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solid" @tap="ChooseImage2" v-if="imgList2.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<!-- 上传封面 -->
				<view class="com">
					<view class="li bc">
						<view class="wz">服务名称</view>
						<view class="nr"><input type="text" v-model="villageName" placeholder="服务名称" /></view>
					</view>
					<view class="li bc">
						<view class="wz">副标题</view>
						<view class="nr"><input type="text" v-model="subhead" placeholder="副标题(选填)" /></view>
					</view>
					<view class="li bc">
						<view class="wz">服务简介</view>
						<view class="nr"><input type="text" v-model="content" placeholder="简介(选填)" /></view>
					</view>
					<view class="li bc">
						<view class="wz">状态</view>
						<view class="nr">
							<radio-group @change="radioChange">
								<label class="radio">
									<radio value="r1" checked="true" color="#18BC37" />开启
								</label>
								<label class="radio">
									<radio value="r2" color="#ED1C24" />禁用
								</label>
							</radio-group>
						</view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="addServer()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				edits: '',
				nodeList: [],
				typeList: [],
				imgList2: [],
				fwID: '',
				lajiPrice: '',
				villageName: '',
				node: {
					errorMsg: {}
				},
				addByParentId: 0,
				addByParentId2: true,
				certBackUrl: '',
				subhead: '', //添加
				content: '', //添加
				editById: '', //添加
				state: 'true', //添加
				alterName: '', //编辑
				altersubhead: '', //编辑
				altercontent: '', //编辑
				alterState: '', //编辑
				alterId: '' //编辑id
			}
		},
		methods: {
			//添加服务状态选择
			radioChange(e) {
				//console.log(e)
				if (e.detail.value == 'r1') {
					this.state = 'true'
				}
				if (e.detail.value == 'r2') {
					this.state = 'false'
				}
				//console.log(this.state)
			},
			radioChange2(e) {
				if (e.detail.value == 'rr1') {
					this.alterState = 'true'
				}
				if (e.detail.value == 'rr2') {
					this.alterState = 'false'
				}
			},
			addNode() {
				this.addByParentId = 2;
				this.addByParentId2 = !this.addByParentId2;
			},
			alter(iemt) {
				this.addByParentId = 1;
				this.addByParentId2 = !this.addByParentId2;

				this.alterName = iemt.name;
				this.altersubhead = iemt.subhead;
				this.altercontent = iemt.content;
				this.alterState = iemt.state;
				this.alterId = iemt.id;


			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgList2,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg2(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList2.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			alterTrue() {
				let th_is = this;
				let resData = {
					'id': th_is.alterId,
					'name': th_is.alterName,
					'subhead': th_is.altersubhead,
					'content': th_is.altercontent,
					'imgPath': th_is.certBackUrl,
					'state': th_is.alterState,
				}
				uni.request({
					url: th_is.baseURL + '/guiminService/alter',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					data: resData,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 500) {
							uni.showToast({
								title: "当前未登录，请先登录",
								duration: 3000,
								icon: 'error'
							});
							return;
						}
						if (res.data.success == true) {
							th_is.getNodeList() //获取服务列表
							this.addByParentId = 0;
							this.addByParentId2 = !this.addByParentId2;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							});
						}
						th_is.edits = null;
					},
					error: (e) => {
						console.warn(e)
						uni.showToast({
							title: "网络错误",
							icon: 'error',
							duration: 2000
						});
					}
				})
			},
			ChooseImage2() { //身份证国徽面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					crop: {
						'width': 40,
						'height': 50
					},
					//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

					success: (res) => {
						if (this.imgList2.length != 0) {
							this.imgList2 = this.imgList2.concat(res.tempFilePaths)
						} else {
							this.imgList2 = res.tempFilePaths
						}
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: _this.baseURL + '/guiminService/upload/pic?name=常规服务',
							header: {
								'token': uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								//console.log(uploadFileRes)
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									//console.log(fileData.data.src);
									_this.certBackUrl = fileData.data.src
									//this.imgList = [...this.imgList, uploadFileRes.data]
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList2 = [];
								}
							},
							fail: function(err) {
								console.log("请求失败\n" + JSON.stringify(err))
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			addServer() {

				if (this.villageName == '') {
					uni.showToast({
						title: '请输入服务名称'
					})
					return;
				}
				let _this = this;
				var ser = {
					'name': _this.villageName,
					'subhead': _this.subhead,
					'content': _this.content,
					'imgPath': _this.certBackUrl,
					'state': _this.state,
				};
				console.log(ser);
				uni.request({
					url: _this.baseURL + '/guiminService/add/type',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					data: ser,
					success: function(res) {
						console.log(res);
						if (res.statusCode == 500) {
							uni.showToast({
								title: "当前未登录，请先登录",
								duration: 3000,
								icon: 'error'
							});
							return;
						}
						if (res.data.success == true) {
							let data = res.data;
							_this.addByParentId = false;
							_this.addByParentId2 = true;
							uni.showToast({
								title: res.data.message,
								icon: 'success',
								duration: 2000
							});
							_this.getNodeList() //获取分类
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2000
							});
						}
					},
					error: function(e) {
						console.warn(e)
					}
				});

			},
			delNode(id, name) {
				let _th_is = this;
				uni.showModal({
					content: '是否删除' + name,
					success(res) {

						if (res.confirm) {
							console.log(id);
							uni.request({
								url: _th_is.baseURL + '/guiminService/delete?id=' + id,
								method: 'GET',
								header: {
									'content-type': 'application/json;charset=utf-8',
									'token': uni.getStorageSync('token')
								},
								success: (res) => {
									console.log(res)
									if (res.statusCode == 500) {
										uni.showToast({
											title: "当前未登录，请先登录",
											duration: 3000,
											icon: 'error'
										});
										return;
									}
									if (res.data.success == true) {
										_th_is.getNodeList() //获取分类
									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'error',
											duration: 2000
										});
									}
								},
								error: (e) => {
									console.warn(e)
									uni.showToast({
										title: "网络错误",
										icon: 'error',
										duration: 2000
									});
								}
							})
						} else {
							console.log('用户点击取消')
						}
					}
				});


			},
			getNodeList() {
				let _this = this;
				uni.request({
					url: this.baseURL + '/guiminService/list',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res);
						if (res.statusCode == 500) {
							uni.showToast({
								title: "当前未登录，请先登录",
								duration: 3000,
								icon: 'error'
							});
							return;
						}
						let data = res.data;
						if (data.success == true) {
							_this.nodeList = data.data

						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'none'
							})
						}
					},
					fail: (e) => {
						console.warn(e)
						uni.hideLoading()
					}
				})
			}


		},
		onLoad(p) {
			this.getNodeList() //获取
			//this.nodeList = this.testData;
		}
	}
</script>
<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";
</style>
